<!DOCTYPE HTML>
<html>
    <head>
        <title>suiyigame</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <style>
            html,body,div,span,canvas{padding:0;border:0;margin:0;outline:0;box-sizing:border-box;}
            html,body{width:100%;height:100%;overflow:hidden;}
            canvas{position:absolute;top:50%;left:50%;margin-left:-400px;margin-top:-300px;border:1px solid #ddd;}
        </style>
    </head>
    <body>
        <canvas id="stage" width="800" height="600"></canvas>
        <canvas id="self" width="800" height="600"></canvas>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                var eleStage = document.getElementById('stage');
                var eleSelf = document.getElementById('self');
                var ctxStage = eleStage.getContext('2d');
                var ctxSelf = eleSelf.getContext('2d');
                var i = 0;
                ctxSelf.translate(400,300);
                setInterval(function(){
                    ctxSelf.rotate(i * 60);
                    ctxSelf.moveTo(0,0);
                    ctxSelf.lineTo(100,100);
                    ctxSelf.stroke();
                    i++;
                },1000);
            },false);
        </script>
    </body>
</html>